<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #container {
            border: 2px solid #ddd;
            border-radius: 10px;
            width: 1380px;
            height: 350px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }

        #prev_btn,
        #next_btn {
            width: 60px;
            height: 60px;
            background: rgba(39, 39, 39, .7);
            display: inline-block;
            border-radius: 50%;
            line-height: 60px;
            text-align: center;
            font-size: 30px;
            color: #fff;
            position: absolute;
            top: 143px;
            left: 15px;
            z-index: 999;
            cursor: pointer;
        }

        #next_btn {
            position: absolute;
            top: 143px;
            left: 1315px;
        }

        #prev_btn img {
            margin: 7px 5px 0 0;
            width: 45px;
            height: 45px;
        }

        #next_btn img {
            margin: 7px 0 0 5px;
            width: 45px;
            height: 45px;
        }

        #banner_container {
            position: absolute;
            width: 8280px;
        }

        #banner_container li {
            list-style: none;
            float: left;
            width: 1380px;
            height: 350px;
        }

        #banner_container li img {
            width: 1380px;
            height: 350px;
        }
    </style>
</head>

<body>
    <div id="container">
        <a id="prev_btn"><img src="images/zuo-copy.png" /></a>
        <a id="next_btn"><img src="images/you-copy.png" /></a>
        <ul id="banner_container">
            <li><img src="https://img.zcool.cn/community/01f1515ca2ca6da801214168c2ae09.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/0138ec5ca44892a801208f8be4c0ea.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01b73c5ca2ca82a801214168fa83fa.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01037e5ca2ca93a801208f8b8d457d.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01da355ca419dfa8012141682afdd2.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01f1515ca2ca6da801214168c2ae09.jpg@1380w" alt=""></li>
        </ul>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        // banner构造函数
        function Banner() {
            this.prev_btn = document.querySelector("#prev_btn");
            this.next_btn = document.querySelector("#next_btn");
            this.slide_container = document.querySelector("#banner_container");
            this.imgs = document.querySelectorAll("#banner_container li")
            this.index = 0
            this.bindEvent()
            this.autoplay()
            this.stopplay()
            this.auto1()
        }
        // 事件绑定
        Banner.prototype.bindEvent = function () {
            var self = this
            // 绑定右箭头事件
            this.next_btn.onclick = function () {
                // 边界值合理性判断


                if (self.index === self.imgs.length - 1) {
                    self.slide_container.style.left = 0;
                    self.index = 1
                } else {
                    self.index++
                }
                self.changgeevent()
            }
            // 左箭头事件
            this.prev_btn.onclick = function () {
                if (self.index <= 0) {
                    self.slide_container.style.left = -6900 + "px";
                    self.index = self.imgs.length - 2
                } else {
                    self.index--
                }
                self.changgeevent()
            }
        }
        // 动画
        Banner.prototype.changgeevent = function () {
            // stop清除动画队列
            $(this.slide_container).stop().animate({
                left: -1380 * this.index
            }, 1000)
        }
        // autoplay
        Banner.prototype.autoplay=function(){

           this.timer=setInterval(()=>{
                // console.log(this.imgs)
                this.index++
                if (this.index === this.imgs.length - 1) {
                    this.slide_container.style.left = 0;
                    this.index = 0
                 } 
                this.changgeevent()
            },3000)
        }
        // 鼠标移入停止自动播放
        Banner.prototype.stopplay=function(){
            this.slide_container.onmouseenter=()=>{
                clearInterval(this.timer)
            }
            
        }
        // 鼠标移出继续自动播放
        Banner.prototype.auto1=function(){
            this.slide_container.onmouseleave=()=>{
                this.autoplay()
            }           
        }
        var fn = new Banner()
    </script>

</body>

</html>